<!DOCTYPE html>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Captive</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery-animate-colors-min.js"></script>



<script>
	$(document).ready(function() {
		document.getElementById("background").style.display="inherit";
		document.getElementById('audiotag1').play();
	 });
	
	function unbindAll()
	{
		$("#news").unbind('click');
		$("#picture").unbind('click');
		$("#drawing").unbind('click');
		document.getElementById("news").onclick = null;
		document.getElementById("picture").onclick = null;
		document.getElementById("drawing").onclick = null;
		$("#company").unbind('click');
		document.getElementById("company").onclick = null;
		$("#sticky").unbind('click');
		document.getElementById("sticky").onclick = null;
		
	}
	
	function rebindAll()
	{
		document.getElementById("news").onclick = function () { news();};
		document.getElementById("news").style.zIndex = "2";
		document.getElementById("picture").onclick = function () {picture();};
		document.getElementById("picture").style.zIndex = "2";
		document.getElementById("drawing").onclick = function () {drawing();};
		document.getElementById("drawing").style.zIndex = "2";
		document.getElementById("company").onclick = function () {company();};
		document.getElementById("company").style.zIndex = "2";
		document.getElementById("sticky").onclick = function () {sticky();};
		document.getElementById("sticky").style.zIndex = "2";
	}

	function news()
	{
		$('#news').stop().animate({
			'right': '550px',
			'top': '117px'
		}, 1000, function() {
			$(this).addClass("newPosition");
		});
		
		$('#news img').stop().animate({
			'width': '250px'
		}, 1000, function() {
			$(this).addClass("newSize");
		});
		
		document.getElementById("dialog").style.display="inherit";
		document.getElementById("news").style.zIndex = "5";
		unbindAll();
		document.getElementById("dialog").innerHTML = "Newspaper <br/> This old newspaper is kept in one of Dad's drawers. I think I saw the same newspaper in my friend Stephen's room before....";
		setTimeout(bind_click, 1000);
		function bind_click(){
			document.getElementById("news").onclick = function() { 
				document.getElementById("dialog").style.display="none";
			
				$('#news').stop().animate({
					'right': '77px',
					'top': '63px'
				}, 1000, function() {
					$(this).removeClass("newPosition");
				});
				
				$('#news img').stop().animate({
					'width': '180px'
				}, 1000, function() {
					$(this).removeClass("newSize");
				});
				
				unbindAll();
				setTimeout(bind_click_again, 1000);
				function bind_click_again(){
					rebindAll();
					}
			}
		}
	}
	
	function picture()
	{
		$('#picture').stop().animate({
			'left': '200px',
			'top': '100px'
		}, 1000, function() {
			$(this).addClass("newPPosition");
		});
		
		$('#picture img').stop().animate({
			'width': '250px'
		}, 1000, function() {
			$(this).addClass("newSize");
		});
		
		document.getElementById("dialog").style.display="inherit";
		document.getElementById("picture").style.zIndex = "5";
		unbindAll();
		document.getElementById("dialog").innerHTML = "Painting <br />Mom...I miss you so much...I wish you are here...";
		setTimeout(bind_click, 1000);
		function bind_click(){
			document.getElementById("picture").onclick = function() { 
				document.getElementById("dialog").style.display="none";
			
				$('#picture').stop().animate({
					'left': '352px',
					'top': '60px'
				}, 1000, function() {
					$(this).removeClass("newPPosition");
				});
				
				$('#picture img').stop().animate({
					'width': '180px'
				}, 1000, function() {
					$(this).removeClass("newSize");
				});
				
				unbindAll();
				setTimeout(bind_click_again, 1000);
				function bind_click_again(){
					rebindAll();
					}
			}
		}
	}
	
	function company()
	{
		$('#company').stop().animate({
			'left': '150px',
			'bottom': '200px'
		}, 1000, function() {
			$(this).addClass("newCPosition");
		});
		
		$('#company img').stop().animate({
			'width': '250px'
		}, 1000, function() {
			$(this).addClass("newSize");
		});
		
		document.getElementById("dialog").style.display="inherit";
		document.getElementById("company").style.zIndex = "5";
		unbindAll();
		document.getElementById("dialog").innerHTML = "Photo of Dad's Company <br />To Dad, this company is everything. Everything....";
		setTimeout(bind_click, 1000);
		function bind_click(){
			document.getElementById("company").onclick = function() { 
				document.getElementById("dialog").style.display="none";
			
				$('#company').stop().animate({
					'left': '352px',
					'bottom': '70px'
				}, 1000, function() {
					$(this).removeClass("newCPosition");
				});
				
				$('#company img').stop().animate({
					'width': '180px'
				}, 1000, function() {
					$(this).removeClass("newSize");
				});
				
				unbindAll();
				setTimeout(bind_click_again, 1000);
				function bind_click_again(){
					rebindAll();
					}
			}
		}
	}
	
	function sticky()
	{
		$('#sticky').stop().animate({
			'left': '150px',
			'bottom': '200px'
		}, 1000, function() {
			$(this).addClass("newCPosition");
		});
		
		$('#sticky img').stop().animate({
			'width': '250px'
		}, 1000, function() {
			$(this).addClass("newSize");
		});
		
		document.getElementById("dialog").style.display="inherit";
		document.getElementById("sticky").style.zIndex = "5";
		unbindAll();
		document.getElementById("dialog").innerHTML = "Sticky Note <br />Jennifer is my babysitter. Gosh...I can't believe Dad still hires a babysitter. I'm 14!! He never trusts me with anything!";
		setTimeout(bind_click, 1000);
		function bind_click(){
			document.getElementById("sticky").onclick = function() { 
				document.getElementById("dialog").style.display="none";
			
				$('#sticky').stop().animate({
					'left': '65px',
					'bottom': '40px'
				}, 1000, function() {
					$(this).removeClass("newCPosition");
				});
				
				$('#sticky img').stop().animate({
					'width': '180px'
				}, 1000, function() {
					$(this).removeClass("newSize");
				});
				
				unbindAll();
				setTimeout(bind_click_again, 1000);
				function bind_click_again(){
					rebindAll();
					}
			}
		}
	}
	
	function drawing()
	{
		$('#drawing').stop().animate({
			'left': '200px',
			'top': '60px'
		}, 1000, function() {
			$(this).addClass("newPPosition");
		});
		
		$('#drawing img').stop().animate({
			'width': '250px'
		}, 1000, function() {
			$(this).addClass("newSize");
		});
		
		document.getElementById("dialog").style.display="inherit";
		document.getElementById("drawing").style.zIndex = "5";
		unbindAll();
		document.getElementById("dialog").innerHTML = "Jimmy's Drawing <br /> I remember showing this to my Dad but he was too busy to look at it for even a few seconds!";
		setTimeout(bind_click, 1000);
		function bind_click(){
			document.getElementById("drawing").onclick = function() { 
				document.getElementById("dialog").style.display="none";
			
				$('#drawing').stop().animate({
					'left': '63px',
					'top': '42px'
				}, 1000, function() {
					$(this).removeClass("newPPosition");
				});
				
				$('#drawing img').stop().animate({
					'width': '180px'
				}, 1000, function() {
					$(this).removeClass("newSize");
				});
				
				unbindAll();
				setTimeout(bind_click_again, 1000);
				function bind_click_again(){
					rebindAll();
					}
			}
		}
	}
	
	
	
	function memory()
	{
		window.location = "memory.php";
	}
	
	function nextscene()
	{
		window.location = "scene2.php";
	}
	

</script>



</head>

<body>


<div id="container">
	<div id="background"><img src="images/jimmypainting.jpg" /></div>
	<div id="news" onclick="news()"><img  src="images/news.jpg" /></div>
	<div id="picture" onclick="picture()" ><img src="images/picture.jpg" /></div>
	<div id="drawing" onclick="drawing()"><img src="images/drawing.jpg" /></div>
	<div id="company" onclick="company()"><img src="images/company.jpeg" /></div>
	<div id="sticky" onclick="sticky()"><img src="images/note.png" /></div>
	<div id="memory" onclick="memory()"><img src="images/yourmemory.png" /></div>
	<div id="nextscene" onclick="nextscene()"><img src="images/nextscene.png" /></div>
	<div id="dialog">
	</div>
</div>




<audio id="audiotag1" src="audios/memory.mp3" preload="auto"></audio>

</body>
</html>